<template>
  <div id="view">
    <div class="w1200">
      <p class="guide">
        <router-link to="/machinemarket">算力市场&nbsp;&nbsp;>&nbsp;</router-link>
        <span>合约详情</span>
      </p>
      <section id="sec1">
        <p class="p1">
          <img src="../common/imgs/btc.png" alt="">
          <img src="../common/imgs/BHP.png" v-if="machine.bhp_power > 0" alt="" style="margin-left: 3px;">
          <span class="mcName">{{machine.name}}</span>
          <span class="lockDays mark" v-if="Number(machine.type) == 10 || Number(machine.type) == 11">不可回购</span>
          <span class="lockDays mark">合约期{{machine.regular_date_num}}天</span>
          <span class="lockDays mark" v-if="Number(machine.type) == 11">不包电费</span>
        </p>
        <div id="content" class="detailList">
          <div>
            <span class="list_one">
              <span class="list_title">单份价格：</span>
              <span class="price">
                <span v-for="(curPay , curIndex ) in machine.good_deposit" v-if="curPay.pay_currency === 'CNY'">
                  {{Number(curPay.goods_deposit)}}{{curPay.pay_currency}}≈
                </span>
                <span v-for="(curPay , curIndex ) in machine.good_deposit" v-if="curPay.pay_currency === 'USDT' && curPay.goods_deposit">
                  {{Number(curPay.goods_deposit)}}{{curPay.pay_currency}}
                </span>
              </span>
            </span>
            <span class="list_one">
              <span class="list_title">单份合约算力:</span>
              <span class="color26">
                {{machine.base_power}}T{{machine.more_power_percent > 0 ? '+'+machine.more_power_percent+'%' : '' }}
                <!-- 1T+130%+(0-25)% -->
              </span>
            </span>
            <span class="list_one">
              <span class="list_title">日挖矿产出:</span>
              <span class="color99">约{{machine.predict_income}}CNY/份</span>
            </span>
            <span class="list_one" v-if="machine.bhp_power > 0">
              <span class="list_title">BHP参配算力:</span>
              <span class="color99">{{machine.bhp_power}}T</span>
            </span>
          </div>
          <div>
            <span class="list_one">
              <span class="list_title">单次下单限额:</span>
              <span class="color99">{{this.accMoreMul(machine.maxLimitNum , machine.base_power)}}T</span>
            </span>
            <span class="list_one">
              <span class="list_title">基础算力:</span>
              <span class="color99">{{machine.base_power}}T</span>
            </span>
            <span class="list_one">
              <span class="list_title">奖励算力:</span>
              <span class="color99">{{ this.accSub(machine.computing_power , machine.base_power) || '' }}T</span>
            </span>
            <span class="list_one">
              <span class="list_title">开挖时间:</span>
              <span class="color99">{{machine.time_income}}&nbsp;</span>
            </span>
            <span class="list_one">
              <span class="list_title">发放方式:</span>
              <span class="color99">日结，次日发放至账户</span>
            </span>
          </div>
          <a href="javascript:void 0;" id="goBuy" @click="openDialog({path : '/fastMachinePay' , query : {machine_id : machine_id },bhp_power : machine.bhp_power})">立即购买</a>
<!--          <router-link :to="{path : '/fastMachinePay' , query : {machine_id : machine_id }}" id="goBuy">立即购买</router-link>-->
        </div>
      </section>
<!--      <section id="sec2">-->
<!--        <p class="p1">产出测算</p>-->
<!--        <p class="p2"><span>币价/</span><span class="days">{{machine.constract_date_num}}天</span><span>产出率 (净产出预估)</span></p>-->
<!--        <div class="d3">-->
<!--          <div class="rangeBox">-->
<!--            <div class="clm" v-for="(item , index) in machine.predict_income_level">-->
<!--              <p class="top">-->
<!--                <span>{{Number(item.btc_price)}} CNY  <span v-if="index == 2" class="mark">历史最高币价</span></span>-->
<!--                <span><span class="range">{{item.income_rate_100}}%</span>({{Number(item.income)}}CNY)</span>-->
<!--              </p>-->
<!--              <p class="bottom">-->
<!--                <span :style="{ transition : 'width 2s' , width : item.width }"></span>-->
<!--              </p>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="standard">-->
<!--            <p>*测算基准：</p>-->
<!--             <span>BTC产量</span>{{machine.btcProduction}}BTC/T，-->
<!--             <span v-if="Number(machine.bhp_power) > 0">-->
<!--               <span>BHP产量</span><span style="color: #262626;">{{machine.bhpProduction}}BHP/T</span> ,<br>-->
<!--             </span>-->
<!--             <span v-if="machine.bhp_price && Number(machine.bhp_price) > 0">BHP价格<span style="color: #262626">{{machine.bhp_price}}CNY</span></span> <span>实际数据随矿池及市场环境波动，仅供参考。</span>-->
<!--          </div>-->
<!--        </div>-->
<!--      </section>-->
      <section id="sec3" v-if="machine.insurance_id && Number(machine.insurance_id) > 0">
        <span>算力宝提供100%产出保障，产出后7/3分</span>
        <img src="../common/imgs/noticeYellow.png" alt="" class="middle hoverhand" @click="mathPowerRule()">
      </section>
      <section id="richText" v-html="machine.desc_pc" v-if="machine.desc_pc"></section>
    </div>
    <dialog-iknow ref="digIknow" titles="提示" confirmBtn="我知道了"/>
    <introduce-dialog ref="dl"/>
  </div>
</template>
<script>
  import { getMachineDetail , bhpayMes } from "../http/api";
  export default {
    name: 'classicMachineDetail',
    data() {
      return {
        machine: {}, //矿机信息
        openBhpay : false,//是否关联bhpay
        machine_id :'',
      }
    },
    components: {
      dialogIknow : resolve => { require(['../components/DialogIknow'], resolve) },
      introduceDialog : resolve => { require(['../components/IntroduceDialog'], resolve) },
    },
    mounted() {
      let machine_id = this.$route.query.machine_id;
      this.machine_id = machine_id;
      let thiz = this;
      let https = [
        // bhpayMes({noToast : true , noLoading : true}).then( res => {
        //   thiz.openBhpay = res.code == 200 ? true : false;
        //   if( res.code == 200 ){
        //     let data = res.data || false;
        //     if( data && JSON.stringify(data) != '{}' ){
        //       thiz.openBhpay = true;
        //     } else{
        //       thiz.openBhpay = false;
        //     }
        //   }else{
        //     thiz.openBhpay = false;
        //   }
        // }),
        getMachineDetail({ machine_id: machine_id , noLoading : true }).then(res => {
          let data = res.data;
          let machine = data.machine;
          this.machine = machine;
          let predict_income_level = machine.predict_income_level;
          let maxWidth = 660/2; //横线100%的宽度
          thiz.for( predict_income_level , function ( item , index ) {
            item.income_rate = item.income_rate < 0 ? 0 : item.income_rate;
            item.income_rate_100 = thiz.numSlice(thiz.accMul(item.income_rate , 100) , 2);
            item.width =  thiz.numSlice(thiz.accMul(maxWidth , item.income_rate) , 2) + 'px';
          });
          machine.predict_income_level = predict_income_level;
        })
      ];
      this.PromiseAll(https);
    },
    methods: {
      mathPowerRule(){
        //算力宝规则弹窗
        //require("../common/imgs/jojojojop.png")
        let imgSrc = require("../common/imgs/jojojojop.png");
        let newImage = new Image();
        newImage.src = imgSrc;
        let thiz = this;
        newImage.onload = function(){
          let newImg = '<img src="'+imgSrc+'" alt="图片" style="width: 100%;">';
          let text = require('../common/jsons/text').mathPowerRule.html;
          thiz.$refs.dl.changeHtml(newImg+text);
          thiz.$refs.dl.dialogShow();
        }
      },
      openDialog(param){
        let thiz = this;
        if( !(this.$store.state.uid) ){
          require('../common/js/toast').toast('该操作需要登录');
          this.$router.push({path : '/login'});
          return;
        }
        if(Number(param.bhp_power > 0)){
          bhpayMes({noToast : true}).then( res => {
            if( res.code == 200 ){
              thiz.$router.push(param);//已绑定bhpay
            }else{
              let html = '<div style="line-height: 170%;font-size: 18px">应平台合规需要，BTC_BHP合约产出的BHP，已在<span style="color: #ffd203">2019年12月30日</span>迁移到BHPay钱包中发放，为确保您的产出正常发放，请下载APP完成BHPay账户关联。</div>';
              this.$refs.digIknow.changeContent(html);
              this.$refs.digIknow.dialogShow();
            }
          });
        } else {
          thiz.$router.push(param);
        }
      },
    }
  }
</script>
<style lang="less" scoped>
  @import "../common/style/common";
  .guide{
    padding: 21px 0;font-size: 16px;
    >a{
      .colorYellow;
    }
    >span{
      color: #262626;
    }
  }

  #view{
    padding-top: 72px;padding-bottom: 90px;
    /deep/ #innerhtml{
      .showTips p {
        line-height: 150%;
        padding-top: 30px;
        .title{
          color: #262626;display: inline-block;width: 100%;padding-bottom: 10px;
        }
        img{
          width: 100%;vertical-align: middle;
        }
        .lz{
          padding-left: 0;display: inline-block;width: 100%;line-height: 150%;color: #898989;;
        }
      }
    }
    >div{
      >section{
        padding: 40px 24px;background: #fff;margin-top: 12px;.borderRadius();
      }
      >#sec1{
        padding-bottom: 0;
        >.p1{
          padding-bottom: 35px;
          img{
            width: 28px;height: 28px;vertical-align: middle;
          }
          >.mcName{
            line-height: 28px;color: #262626;vertical-align: middle;margin-left: 10px;display: inline-block;font-size: 24px;
          }
          >.mark{
            background: #FFF6EC;.borderRadius;.colorYellow;height: 21px;display: inline-block;line-height: 21px;font-size: 12px;
            padding: 0 7px;margin-left: 11px;vertical-align: middle;
          }
        }
        #content{
          padding-bottom: 34px;
          >div{
            .overHidden;
            >.list_one{
              position: relative;float: left;display: inline-block;padding: 0 25px;line-height: 46px;height: 46px;
              >span{
                line-height: 46px;height: 46px;
              }
              &:before{
                content: '';display: block;background: #eee;width: 1px;position: absolute;left: 0;top: 50%;height: 18px;margin-top: -9px;
              }
              &:first-child{
                padding-left: 0;
                &:before{
                  display: none;
                }
              }
              >.list_title{
                color: #262626;font-size: 16px;
              }
              >.price{
                .colorYellow;font-size: 22px;
              }
              .color26{
                color: #262626;font-size: 16px;
              }
              .color99{
                color: rgba(38, 38, 38, 0.65);font-size: 16px;
              }
            }
          }
          >#goBuy{
            .submit;width: 220px;height: 46px;line-height: 46px;font-size: 18px;margin-top: 34px;
          }
        }
        #richText{
          padding-bottom: 48px;;
        }
      }
      >#sec2{
        padding-top: 26px;
        >.p1{
          color: #262626;font-size: 18px;padding-left: 13px;position: relative;
          &:before{
            content: '';display: inline-block;width: 3px;height: 18px;.bgYellow;position: absolute;left: 0;top: 50%;margin-top: -9px;;
          }
        }
        >.p2{
          color: #999999;font-size: 14px;padding-top: 16px;
          >.days{
            .colorYellow;vertical-align: middle;
          }
        }
        >.d3{
          overflow: hidden;
          >.rangeBox{
            float: left;width: 660px;
            >.clm{
              padding-top: 21px;width: 100%;
              >.top{
                overflow: hidden;font-size: 16px;
                >span:first-child{
                  float: left;
                  >.mark{
                    color: #999999;font-size: 12px;;
                  }
                }
                >span:last-child{
                  float: right;
                  >.range{
                    .colorYellow;
                  }
                }
              }
              >.bottom{
                height: 6px;width: 100%;background: #F5F5F5;display: block;.borderRadius;margin-top: 11px;overflow: hidden;
                >span{
                  .bgYellow;display: inline-block;float: left;height: 100%;width: 0;
                }
              }
            }
          }
          >.standard{
            height: 165px;width: 424px;background: #F8F8F8;float: right;font-size: 16px;
            color: #262626;line-height: 190%;padding: 16px 25px;padding-bottom: 0;padding-top: 26px;padding-right: 34px;
            >p{
              line-height: 103%;padding-bottom: 10px;
            }
            >span{
              color: #B0B0B0;line-height: 190%;
            }
            span{display: -webkit-inline-box}
          }
        }
    }
      >#sec3{
        height: 60px;background: #FCF9F0;padding: 0;line-height: 60px;padding-left: 25px;color: #B38A43;font-size: 18px;
        >span{
          vertical-align: middle;
        }
        >img{
          width: 18px;height: 18px;
          &:hover{
            cursor: pointer;
          }
        }
      }
  }
}
</style>
